<template>
  <div class="lpkcart">
    <!-- 头部区域开始 -->
    <div class="lpkcart-head">
      <van-nav-bar title="购物车" right-text="删除" @click-right="ondel" />
    </div>
    <!-- 头部区域结束 -->
    
    <!-- 购物车区域开始 -->
    <div class="cart">
      <van-checkbox-group v-model="optionlist" ref="checkboxGroup">
        <van-checkbox name="a" checked-color="#ee0a24">
          <van-card
            price="20.00"
            desc="描述信息描述信息描述述信息"
            title="商品标题商品标题商品标品标标题商品品标题"
            thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
          >
            <template #footer>
              <van-stepper
                theme="round"
                button-size="22"
                max="99"
                disable-input
              />
            </template>
          </van-card>
        </van-checkbox>
        <van-checkbox name="b" checked-color="#ee0a24">
          <van-card
            price="20.00"
            desc="描述信息描述信息描述述信息"
            title="商品标题商品标题商品标品标标题商品品标题"
            thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
          >
            <template #footer>
              <van-stepper
                theme="round"
                button-size="22"
                max="99"
                disable-input
              />
            </template>
          </van-card>
        </van-checkbox>
      </van-checkbox-group>
    </div>
    <!-- 购物车区域结束 -->

    <!-- 结算区域开始 -->
    <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
      <van-radio-group v-model="check" direction="horizontal">
        <van-radio name="1" @click="checkAll" checked-color="#ee0a24">全选</van-radio>
        <van-radio name="2" @click="toggleAll" checked-color="#ee0a24">取消全选</van-radio>
      </van-radio-group>
    </van-submit-bar>
    <!-- 结算区域结束 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      optionlist: [],
      check: null,
    };
  },
  methods: {
    //顶部删除
    ondel() {},
    //全部选择
    checkAll() {
      this.$refs.checkboxGroup.toggleAll(true);
    },
    //全部取消
    toggleAll() {
      this.$refs.checkboxGroup.toggleAll(false);
    },
  },
};
</script>

<style scoped lang="scss">
@import "../assets/scss/lpkcart.scss";
</style>